<template>
  <div class="approve-manage">
    <div class="query-form">
      <el-form ref="form" :inline="true" :model="queryForm">
        <el-form-item label="审批状态" prop="applyType">
          <el-select v-model="queryForm.applyType" placeholder="全部">
            <el-option label="事假" :value="1"></el-option>
            <el-option label="调休" :value="2"></el-option>
            <el-option label="年假" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getApproveList">查询</el-button>
          <el-button @click="handleReset('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="handleAdd()">申请休假</el-button>
      </div>
      <el-table :data="approveList">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        >
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)" size="mini"
              >编辑</el-button
            >
            <!-- v-if="[1, 2].includs(scope.row.applyState)" -->
            <el-button
              type="danger"
              size="mini"
              @click="handleDel(scope.row._id)"
              >作废</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        :total="pager.total"
        :current-page="pager.pageNum"
        :page-size="pager.pageSize"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
      ></el-pagination>
    </div>

    <el-dialog title="申请休假" v-model="showModal">
      <el-form
        ref="dialogForm"
        :model="approveForm"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="休假类型" prop="applyType">
          <el-select v-model="approveForm.applyType">
            <el-option label="事假" :value="1"></el-option>
            <el-option label="调休" :value="2"></el-option>
            <el-option label="年假" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="休假日期" prop="startAndEndTime">
          <el-date-picker
            v-model="approveForm.startAndEndTime"
            type="daterange"
            @change="handleChangeTime"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="休假时长"> {{ approveTime }}天 </el-form-item>
        <el-form-item label="休假原因" prop="reasons">
          <el-input
            type="textarea"
            :row="3"
            placeholder="请输入休假原因"
            v-model="approveForm.reasons"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="详情" v-model="showModalInfo" destroy-on-close>
      <el-form
        ref="dialogFormInfo"
        :model="approveForm"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="休假类型">
          <span>{{ detail.applyTypeName }}</span>
        </el-form-item>
        <el-form-item label="休假日期">
          <span>{{ detail.time }}</span>
        </el-form-item>
        <el-form-item label="休假时长"> {{ detail.approveTime }} </el-form-item>
        <el-form-item label="休假原因">
          <span>{{ detail.reasons }}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import utils from "../../utils/utils";
export default {
  data () {
    return {
      queryForm: {
        applyType: '',
      },
      approveList: [],
      columns: [
        {
          label: "单号",
          prop: "orderNo",
          width: 150,
        },
        {
          label: "休假时间",
          prop: "approveTimeLength",
          formatter: (row, column, value) => {
            return row.startTime + " - " + row.endTime
          }
        },
        {
          label: "休假时长",
          prop: "approveTime",
        },
        {
          label: "休假类型",
          prop: "applyType",
          formatter: (row, column, value) => {
            return {
              1: '事假',
              2: '调休',
              3: '年假',
            }[value]
          }
        },
        {
          label: "审批人",
          prop: "auditUsers",
        },
        {
          label: "当前审批人",
          prop: "applyUser.userName",
        },
        {
          label: "审批状态",
          prop: "applyState",
          formatter: (row, column, value) => {
            return {
              1: '待审批',
              2: '审批中',
              3: '审批拒绝',
              4: '审批通过',
              5: '待审批',
            }[value]
          }
        },
      ],
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      showModal: false,
      approveForm: {
        applyType: 1,
        startAndEndTime: []
      },
      action: "",
      rules: {
        startAndEndTime: [
          {
            required: true,
            message: "请选择开始和结束日期",
            trigger: "change",
          },
        ],
        reasons: [
          {
            required: true,
            message: "请输入休假原因",
            trigger: "blur",
          },
        ],
      },
      // 休假天数
      approveTime: 0,
      menuList: [],
      detail: {},
      showModalInfo: false,
      // 菜单映射表
      actionMap: {},
    };
  },
  mounted () {
    this.getApproveList();
  },
  methods: {
    handleChangeTime (val) {
      // console.log(val)
      if (val[0] === val[1]) {
        this.approveTime = 1;
      } else {
        this.approveTime = Math.floor((new Date(val[1]).getTime() - new Date(val[0]).getTime() + 1) / (1000 * 60 * 60 * 24))
      }
    },
    // 列表初始化
    async getApproveList () {
      try {
        let params = { ...this.queryForm, ...this.pager };
        const { list, page } = await this.$api.getApproveList(params);
        this.approveList = list;
        this.pager.total = page.total;
      } catch (error) {
        console.log('error:', error)
      }
    },
    handleCurrentChange (current) {
      this.pager.pageNum = current;
      this.getApproveList();
    },
    // 表单重置
    handleReset (form) {
      this.$refs[form].resetFields();
    },
    // 新增菜单
    handleAdd (type, row) {
      this.showModal = true;
      this.action = "add";
    },
    handleEdit (row) {
      this.showModalInfo = true;
      this.action = "edit";
      this.$nextTick(() => {
        Object.assign(this.approveForm, row);
      });
    },
    async handleDel (_id) {
      await this.$api.approveSubmit({ _id, action: "delete" });
      this.$message.success("删除成功");
      this.getApproveList();
    },
    // 操作-提交
    handleSubmit () {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          let { action, approveForm, approveTime } = this;
          let params = {
            ...approveForm, action,
            startTime: approveForm.startAndEndTime[0],
            endTime: approveForm.startAndEndTime[1],
            approveTime,
          };
          let res = await this.$api.approveSubmit(params);
          this.showModal = false;
          this.$message.success("操作成功");
          this.handleReset("dialogForm");
          this.getApproveList();
        }
      });
    },
    // 弹框关闭
    handleClose () {
      this.showModal = false;
      this.handleReset("dialogForm");
    },
  },
};
</script>

<style lang="scss">
</style>